import React, { Component } from "react";
import PropTypes from "prop-types";
import footer from "./index.module.css";

export default class Footer extends Component {
  static propTypes = {
    all: PropTypes.array.isRequired,
    allChecked: PropTypes.func.isRequired,
    deleteCheck:PropTypes.func.isRequired,
  };
  state = { checked: false };
  // 全选
  handleCheck = (e) => {
    this.props.allChecked(e.target.checked);
  };
  // 清除已完
  handleChange = () => {
    this.props.deleteCheck();
  };
  render() {
    let { all } = this.props;
    let accomplish = all.reduce((pre, item) => pre + (item.done ? 1 : 0), 0);
    return (
      <div className={footer.footer}>
        <div>
          <input
            type="checkbox"
            onChange={this.handleCheck}
            checked={
              all.length === accomplish && all.length !== 0 ? true : false
            }
          />
          <span>
            已完成{accomplish}/全部{all.length}
          </span>
        </div>
        <button className={footer.btn} onClick={this.handleChange} style={{display:all.length>0?'block':'none'}}>
          清除已完成任务
        </button>
      </div>
    );
  }
}
